<template>
  <div class="home">
    <!-- 头部 -->
    <Head @fn="getActiveIndex" />
    <!-- 内容部分 -->
    <div class="content">
      <el-row :span="24">
        <el-col :span="4">
          <!-- 侧边导航菜单 -->
          <AsideMenu v-if="activeNum == 3" @fnuc="getIndex" />
        </el-col>
        <el-col :span="20">
          <!-- 内容 -->
          <!-- 1.互联网泛在数据采集子系统 -->
          <!-- 2.其他来源地学数据引接子系统 -->
          <!-- 3.数据清洗内容部分 -->
          <!-- 数据检测 -->
          <Datajc v-if="activeIndex == 1" />
          <!-- 数据分类编目 -->
          <!-- 数据清洗/数据标准化 /模型管理-->
          <Databzh v-if="activeIndex == '3-3'" />
          <!-- 数据清洗/数据清洗转换/资源注册 -->
          <Zyzc v-if="activeIndex == '4-1'" />
          <!-- 数据清洗/数据清洗转换/映射管理 -->
          <Ysgl v-if="activeIndex == '4-2'" />
          <!-- 数据清洗/数据清洗转换/工作流管理 -->
          <Gzlgl v-if="activeIndex == '4-3'" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Head from "@/components/head.vue";
import AsideMenu from "@/components/asidemenu.vue";
import Datajc from "../components/content/dataclean/datajc.vue";
import Databzh from "../components/content/dataclean/databzh/mxgl.vue";
import Zyzc from "../components/content/dataclean/dataqxzh/zyzc.vue";
import Ysgl from "../components/content/dataclean/dataqxzh/ysgl.vue";
import Gzlgl from "../components/content/dataclean/dataqxzh/gzlgl.vue";
export default {
  name: "Home",
  data() {
    return {
      activeNum: 3,
      activeIndex: "3-3",
    };
  },
  components: {
    Head,
    AsideMenu,
    Datajc,
    Databzh,
    Zyzc,
    Ysgl,
    Gzlgl,
  },

  methods: {
    getActiveIndex(activeIndex) {
      this.activeNum = activeIndex;
      console.log(activeIndex);
    },
    getIndex(index) {
      console.log(index);
      this.activeIndex = index;
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  margin: 0 auto;
  .head {
    width: 100%;
    height: 80px;
    background: #1a2e44;
    box-shadow: 0px 2px 3px 1px #c9c9c9;
    opacity: 1;
  }
  .content {
    text-align: left;
    font-size: 24px;
    margin-top: 5px;
  }
}
</style>
